<template>
  <div class="blog-editor">
    <!-- 工具栏容器 -->
    <div ref="toolbar">
      <!-- 完整工具栏结构 -->
      <!-- 字体选择 -->
  <select class="ql-font">
    <option value="sans-serif" selected>Sans Serif</option>
    <option value="serif">Serif</option>
    <option value="monospace">Monospace</option>
  </select>

  <!-- 字体大小 -->
  <select class="ql-size">
    <option value="13px">小</option>
    <option value="16px" selected>Normal</option>
    <option value="20px">大</option>
  </select>

  <!-- 基础格式 -->
  <button class="ql-bold">B</button>
  <button class="ql-italic">I</button>
  <button class="ql-underline">U</button>
  <button class="ql-strike">S</button>

  <!-- 颜色选择 -->
  <select class="ql-color"></select>
  <select class="ql-background"></select>

  <!-- 自定义缩放按钮 -->
  <button id="zoom-out">微</button>
  <button class="ql-code-block"></button>

  <!-- 列表 -->
  <button class="ql-list" value="ordered">三</button>
  <button class="ql-list" value="bullet">二</button>
  <button class="ql-header" value="1"></button>
  <button class="ql-header" value="2"></button>
  <button class="ql-header" value="3"></button>
  <button class="ql-header" value="4"></button>
  
  <!-- 一级标签,二级标签 -->
  <button class="ql-image"></button>
</div>
    <!-- 编辑器容器 -->
    <div ref="editor"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import Quill from 'quill';
import 'quill/dist/quill.snow.css';
import hljs from "highlight.js";
import "highlight.js/styles/atom-one-dark.css";
import katex from "katex";

// 注册 highlight.js 和 katex
// window.hljs = hljs;
window.katex = katex;
// 初始化配置
const toolbar = ref(null);
const editor = ref(null);
let quillInstance = null;

// 注册语法高亮
// hljs.configure({
//   // 语言列表
//   languages: ["JavaScript", "Python", "Java", "Sql"],
// });

// 注册KaTeX
window.katex = katex;

// 自定义代码块语法高亮
// const CodeBlock = Quill.import("formats/code-block");
// CodeBlock.className = "hljs";
// Quill.register(CodeBlock, true);

onMounted(() => {
  // 确保 highlight.js 已经加载
  
    loadingDate();
  
});
function loadingDate() {

    // 初始化编辑器
  quillInstance = new Quill(editor.value, {
    modules: {
      // 工具栏模块
      syntax: false, // 语法高亮
      toolbar: toolbar.value,
    },
    theme: "snow",
    placeholder: "开始你的创作...",
  });
    
 }
 // 暴露获取内容的方法
const getContent = () => quillInstance.root.innerHTML
const setContent = (content) => {
  quillInstance.root.innerHTML = content;
};

onBeforeUnmount(() => {
  // 清理资源
  if (quillInstance) {
    quillInstance = null;
  }
});
defineExpose({ getContent, setContent });
</script>

<style>
/* 引入必要样式 */
@import "highlight.js/styles/atom-one-dark.css";
@import "katex/dist/katex.min.css";

.blog-editor {
  max-width: 1200px;
  margin: 0 auto;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.ql-toolbar {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.ql-container {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  height: 600px;
}

.hljs {
  padding: 1em;
  border-radius: 4px;
}
</style>
